<template>
  <div class="app-container flex1 flex-col over-hidden product-property-list">
    <el-form class="flex-shrink-0">
      <el-form
        class="flex-shrink-0"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="属性名称" prop="propertyName">
          <el-input
            v-model="queryParams.propertyName"
            placeholder="请输入属性名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="属性值" prop="propertyValue">
          <el-input
            v-model="queryParams.propertyValue"
            placeholder="请输入属性值"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery('queryForm')"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-form>

    <div class="flex-shrink-0 opt-btn">
      <el-button type="primary" size="small" @click="handleAddProperty"
        >新增</el-button
      >
    </div>
    <!-- 剩余空间通过 flex1 全部分给表格，over-hidden 必须使用 -->
    <div class="flex1 over-hidden">
      <el-table
        :data="tableData"
        height="100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        ref="multipleTable"
      >
        <el-table-column
          align="center"
          label="属性编号"
          prop="propCode"
        ></el-table-column>
        <el-table-column
          align="center"
          label="属性名称"
          prop="propName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="属性值"
          prop="propValue"
        ></el-table-column>
        <el-table-column
          align="center"
          label="排序"
          prop="propSort"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row.propCode)"
              >编辑
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="handleDelete(scope.row.propCode)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      class="text-center bgfff pd10 flex-shrink-0"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size.sync="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      :modal-append-to-body="false"
      :title="isAdd ? '新增商品属性' : '编辑商品属性'"
      :visible.sync="dialogVisible"
      top="15vh !important"
      width="400px"
      @close="handleCancel"
    >
      <el-form
        :model="updateParams"
        label-width="120px"
        ref="updateForm"
        :rules="updateRules"
      >
        <el-form-item label="属性编号" prop="propCode">
          <el-input v-model="updateParams.propCode"></el-input>
        </el-form-item>
        <el-form-item label="属性名称" prop="propName">
          <el-input v-model="updateParams.propName"></el-input>
        </el-form-item>
        <el-form-item label="属性值" prop="propValue">
          <el-input v-model="updateParams.propValue"></el-input>
        </el-form-item>
        <el-form-item label="属性排序" prop="propSort">
          <el-input v-model="updateParams.propSort"></el-input>
        </el-form-item>
      </el-form>
      <div class="update-btn">
        <el-button type="primary" size="small" @click="handleUpdateConfirm">
          确定
        </el-button>
        <el-button type="warning" size="small" @click="handleCancel">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tableMixin } from "@/mixins/index";

export default {
  mixins: [tableMixin],
  data() {
    return {
      total: 0,
      tableData: [
        {
          propCode: "sx001",
          propName: "形状",
          propValue: "直筒",
          propSort: "1",
        },
      ],
      loading: false,
      statusArr: [],
      queryParams: {
        companyName: "",
        societyCode: "",
        status: "",
      },
      dialogVisible: false,
      isAdd: true,
      updateParams: {
        propCode: "",
        propName: "",
        propValue: "",
        propSort: "",
      },
      updateRules: {
        propCode: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入属性编号！",
          },
        ],
        propName: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入属性名称！",
          },
        ],
        propValue: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入属性值！",
          },
        ],
        propSort: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入属性排序！",
          },
        ],
      },
    };
  },
  created() {},
  computed: {
    // tableData() {
    //   return this.$store.state.products.propertyList;
    // },
  },
  methods: {
    getList() {},
    handleAddProperty() {
      this.isAdd = true;
      this.updateParams = {
        propCode: "",
        propName: "",
        propValue: "",
        propSort: "",
      };
      this.dialogVisible = true;
      this.$refs.updateForm && this.$refs.updateForm.resetFields();
    },
    handleEdit(propertyCode) {
      this.isAdd = false;
      this.updateParams = this.tableData.filter((item) => item.propCode === propertyCode)[0]
      this.dialogVisible = true;
    },
    handleDelete() {},
    handleUpdateConfirm() {
      const { propCode } = this.updateParams;
      const repeatFlag = this.tableData.some(
        (item) => item.propCode === propCode
      );
      if (repeatFlag && this.isAdd) {
        this.msgError("属性编号已存在，请重新输入!");
      } else {
        this.$refs.updateForm.validate((value) => {
          if (value) {
            this.msgSuccess("操作成功！");
            console.log(this.updateParams);
            const updateList = this.isAdd
              ? [...this.tableData, { ...this.updateParams }]
              : [...this.tableData];
              this.tableData = updateList;
            this.$store.commit("update_propertyList", updateList);
            this.handleCancel();
          }
        });
      }
    },
    handleCancel() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.product-property-list {
  height: 100%;
  .opt-btn {
    padding: 20px;
  }
  .update-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
